// 自定义name的壳的集合
import {h} from "vue";

const wrapperMap = new Map()

// 根据传入的 Component 和 route 创建一个包装组件，并返回该包装组件的虚拟节点
export const useWrapComponents = (Component,route)=>{
    let wrapper // 声明一个变量 wrapper，用于存储包装组件的信息。
    if (Component) { // 判断传入的 Component 是否存在
        const wrapperName = route.name // 从 route 对象中获取 name 属性，并将其赋值给 wrapperName 变量
        if (wrapperMap.has(wrapperName)) { // 判断 wrapperMap（一个 Map 对象）中是否已经存在 wrapperName 对应的包装组件
            wrapper = wrapperMap.get(wrapperName) // ：如果 wrapperMap 中已经存在 wrapperName 对应的包装组件，则将其赋值给 wrapper 变量。
        } else {
            wrapper = { // 创建一个新的包装组件对象，并将其赋值给 wrapper 变量
                name: wrapperName, // 设置包装组件对象的 name 属性为 wrapperName
                render() { // 定义包装组件对象的 render 方法。

                    // 返回一个虚拟节点，该节点是一个 div 元素，具有 className 属性为 "app-main-inner"，并包含 Component 组件。
                    return h("div", {className: "app-main-inner"}, Component)
                },
            }
            wrapperMap.set(wrapperName, wrapper) // 将包装组件对象存储到 wrapperMap 中，以 wrapperName 作为键
        }
        return h(wrapper) // 返回一个虚拟节点，该节点是通过 h 函数创建的，参数为 wrapper，即包装组件对象
    }
}
